[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" import type React from "react" import Link from "next/link" import { BarChart3, BoxIcon, Layers, Settings, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

WarehouseOS

My Account Profile Settings Log out

{children}

) } const navItems = [ { name: "Boxes", href: "/dashboard/boxes", icon: BoxIcon, }, { name: "Shelves", href: "/dashboard/shelves", icon: Layers, }, { name: "Warehouse Configuration", href: "/dashboard/configuration", icon: Settings, }, { name: "Monitoring", href: "/dashboard/monitoring", icon: BarChart3, }, ] [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart3, BoxIcon, Layers, Settings } from "lucide-react" export default function DashboardPage() { return (

Dashboard

Welcome to your warehouse management system.

Total Boxes

1,284

+12% from last month

Shelf Capacity

76%

+2% from last week

Warehouse Status

Optimal

All systems operational

Efficiency

92%

+5% from last quarter

) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 142.1 76.2% 36.3%; --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 142.1 76.2% 36.3%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 142.1 70.6% 45.3%; --primary-foreground: 144.9 80.4% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 142.4 71.8% 29.2%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/dashboard/shelves/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import ReactFlow, { type Node, type Edge, Background, Controls, Position, useNodesState, useEdgesState, } from "reactflow" import "reactflow/dist/style.css" import { z } from "zod" import { BoxIcon, Layers, Trash2 } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" // Schema for warehouse data const warehouseDataSchema = z .object({ nodes: z.array( z.object({ name: z.string(), x: z.number(), y: z.number(), isHome: z.boolean().optional(), isTag: z.boolean().optional(), tagColor: z.string().optional(), shelfId: z.number().optional(), }), ), connections: z.array( z.object({ fromNode: z.string(), toNode: z.string(), distance: z.number(), }), ), }) .optional() // Schema for shelf data const shelfSchema = z.object({ name: z.string().min(1).max(50), initialHeight: z.number().positive(), ShelfSlotHeight: z.number().positive(), levels: z.number().int().min(1).max(10).optional(), locationId: z.string(), tag: z.string().min(1).max(50).optional(), color: z.string().min(1).max(50).optional(), }) export default function ShelvesPage() { const [nodes, setNodes, onNodesChange] = useNodesState([]) const [edges, setEdges, onEdgesChange] = useEdgesState([]) const [data, setData] = useState(null) const [shelves, setShelves] = useState([]) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [selectedNode, setSelectedNode] = useState(null) const [shelfForm, setShelfForm] = useState({ name: "", initialHeight: 0, ShelfSlotHeight: 0, levels: 2, locationId: "", tag: "", color: "#10b981", // Default color - emerald-500 }) // Fetch initial data useEffect(() => { const fetchData = async () => { try { setIsLoading(true) const [warehouseResponse, shelvesResponse] = await Promise.all([ fetch("/api/warehouse/bulk"), fetch("/api/shelves"), ]) if (!warehouseResponse.ok || !shelvesResponse.ok) { throw new Error("Failed to fetch data") } const [warehouseData, shelvesData] = await Promise.all([warehouseResponse.json(), shelvesResponse.json()]) // Handle warehouse data if (!warehouseData || !warehouseData.nodes || !warehouseData.connections) { setData({ nodes: [], connections: [] }) } else { try { const validatedData = warehouseDataSchema.parse(warehouseData) setData(validatedData) } catch (validationError) { console.error("Data validation error:", validationError) setData(warehouseData) } } // Set shelves data setShelves(shelvesData) } catch (err) { console.error("Error fetching data:", err) setError("Failed to load data") setData({ nodes: [], connections: [] }) setShelves([]) } finally { setIsLoading(false) } } fetchData() }, []) // Update nodes and edges when data changes useEffect(() => { if (!data || !data.nodes || !data.connections) { setNodes([]) setEdges([]) return } const newNodes: Node[] = data.nodes.map((node: any) => { // Find if this node has shelves const nodeHasShelves = shelves.some((shelf) => shelf.locationId === node.name) return { id: node.name, position: { x: node.x * 100, y: -node.y * 100 }, data: { label: node.name, hasShelves: nodeHasShelves || node.shelfId, // Pass this to custom renderer if needed }, style: { width: nodeHasShelves || node.shelfId ? 80 : 60, // Make shelf nodes bigger height: nodeHasShelves || node.shelfId ? 80 : 60, borderRadius: nodeHasShelves || node.shelfId ? "0%" : "50%", // Square for shelves, circle for regular background: nodeHasShelves || node.shelfId ? "linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%)" : "#3f3f46", color: "white", display: "flex", justifyContent: "center", alignItems: "center", fontSize: nodeHasShelves || node.shelfId ? "16px" : "14px", // Larger text for shelf nodes fontWeight: "bold", border: nodeHasShelves || node.shelfId ? "3px dashed #fde68a" // Gold dashed border for shelves : "2px solid #71717a", boxShadow: nodeHasShelves || node.shelfId ? "0 0 15px rgba(16, 185, 129, 0.5)" // Glow effect for shelves with emerald color : "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", }, sourcePosition: Position.Top, targetPosition: Position.Top, } }) const newEdges: Edge[] = data.connections.map((connection: any) => ({ id: `e${connection.fromNode}-${connection.toNode}`, source: connection.fromNode, target: connection.toNode, type: "straight", style: { stroke: "#10b981", // emerald-500 strokeWidth: 2, }, label: connection.distance.toString(), labelStyle: { fill: "#ffffff", fontSize: 12, fontWeight: "bold", }, labelBgStyle: { fill: "#18181b", // zinc-900 opacity: 0.8, }, labelBgPadding: [4, 4], labelBgBorderRadius: 4, })) setNodes(newNodes) setEdges(newEdges) }, [data, setNodes, setEdges, shelves]) const handleNodeClick = (event: React.MouseEvent, node: Node) => { setSelectedNode(node.id) setShelfForm((prev) => ({ ...prev, locationId: node.id, })) } const handleShelfSubmit = async (e: React.FormEvent) => { e.preventDefault() try { const validatedData = shelfSchema.parse(shelfForm) const response = await fetch("/api/shelves", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(validatedData), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to create shelf") } const newShelf = await response.json() setShelves((prev) => [...prev, newShelf]) alert("Shelf created successfully!") setShelfForm({ name: "", initialHeight: 0, ShelfSlotHeight: 0, levels: 2, locationId: "", tag: "", color: "#10b981", // emerald-500 }) } catch (error) { if (error instanceof z.ZodError) { alert("Invalid shelf data: " + error.errors.map((e) => e.message).join(", ")) } else { alert(error instanceof Error ? error.message : "Failed to create shelf") } } } const handleDeleteShelf = async (shelfId: number) => { if (!confirm("Are you sure you want to delete this shelf?")) { return } try { const response = await fetch(`/api/shelves/${shelfId}`, { method: "DELETE", }) if (!response.ok) { throw new Error("Failed to delete shelf") } // Remove the shelf from the local state setShelves((prev) => prev.filter((shelf) => shelf.id !== shelfId)) alert("Shelf deleted successfully!") } catch (error) { alert(error instanceof Error ? error.message : "Failed to delete shelf") } } if (isLoading) { return (

) } if (error) { return (

Error

{error}

) } return (

Shelves Management

Create and manage warehouse shelves

{/* Left panel - Shelf Form and List */}

Create Shelf

Shelf Name setShelfForm((prev) => ({ ...prev, name: e.target.value }))} className="bg-zinc-800 border-zinc-700 text-zinc-100" required />

Initial Height (cm) setShelfForm((prev) => ({ ...prev, initialHeight: Number(e.target.value) }))} className="bg-zinc-800 border-zinc-700 text-zinc-100" required min="0" step="0.1" />

Shelf Slot Height (cm) setShelfForm((prev) => ({ ...prev, ShelfSlotHeight: Number(e.target.value) }))} className="bg-zinc-800 border-zinc-700 text-zinc-100" required min="0" step="0.1" />

Number of Levels setShelfForm((prev) => ({ ...prev, levels: Number(e.target.value) }))} className="bg-zinc-800 border-zinc-700 text-zinc-100" min="1" max="10" />

Selected Location

Tag setShelfForm((prev) => ({ ...prev, tag: e.target.value }))} className="bg-zinc-800 border-zinc-700 text-zinc-100" placeholder="Optional tag name" />

Color

setShelfForm((prev) => ({ ...prev, color: e.target.value }))} className="h-10 w-10 rounded cursor-pointer" /> setShelfForm((prev) => ({ ...prev, color: e.target.value }))} className="flex-1 bg-zinc-800 border-zinc-700 text-zinc-100" placeholder="#10b981" />

Existing Shelves

{shelves.length === 0 ? (

No shelves created yet

) : ( shelves.map((shelf) => (

{shelf.name}

Location:

{shelf.location?.name || "Unknown"}

Height:

{shelf.initialHeight}cm

Slot Height:

{shelf.ShelfSlotHeight}cm

Levels:

{shelf.levels}

Slots:

{shelf.slots?.length || 0}

{shelf.tag && (

{shelf.tag}

)}

)) )}

{/* Right panel - Graph Visualization */} Warehouse Layout

) } [V0_FILE]typescriptreact:file="app/dashboard/configuration/page.tsx" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import ReactFlow, { type Node, type Edge, Controls, Background, useNodesState, useEdgesState, Position, } from "reactflow" import Editor from "@monaco-editor/react" import "reactflow/dist/style.css" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Trash2, Save, RefreshCw } from "lucide-react" interface WarehouseNode { name: string x: number y: number isHome: boolean isTag: boolean tagColor?: string } interface WarehouseConnection { fromNode: string toNode: string distance: number } interface WarehouseData { nodes: WarehouseNode[] connections: WarehouseConnection[] } const defaultData: WarehouseData = { nodes: [], connections: [], } export default function WarehouseConfigurationPage() { const [data, setData] = useState(defaultData) const [nodes, setNodes, onNodesChange] = useNodesState([]) const [edges, setEdges, onEdgesChange] = useEdgesState([]) const [editorValue, setEditorValue] = useState(JSON.stringify(defaultData, null, 2)) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [isSaving, setIsSaving] = useState(false) const fetchData = useCallback(async () => { try { setIsLoading(true) setError(null) const response = await fetch("/api/warehouse/bulk") const warehouseData = await response.json() if (!response.ok) { if (response.status === 503) { setError("Database connection error. Please try again later.") console.error("Database connection error:", warehouseData.error) setData(defaultData) setEditorValue(JSON.stringify(defaultData, null, 2)) return } throw new Error(warehouseData.error || "Failed to fetch data") } // Ensure we have valid data structure const transformedData: WarehouseData = { nodes: Array.isArray(warehouseData.nodes) ? warehouseData.nodes.map((node: any) => ({ name: node.name || "", x: Number(node.x) || 0, y: Number(node.y) || 0, isHome: Boolean(node.isHome), isTag: Boolean(node.isTag), tagColor: node.tagColor || undefined, })) : [], connections: Array.isArray(warehouseData.connections) ? warehouseData.connections.map((conn: any) => ({ fromNode: conn.fromNode || "", toNode: conn.toNode || "", distance: Number(conn.distance) || 0, })) : [], } setData(transformedData) setEditorValue(JSON.stringify(transformedData, null, 2)) } catch (error) { console.error("Error fetching data:", error) setError(error instanceof Error ? error.message : "Failed to fetch data") setData(defaultData) setEditorValue(JSON.stringify(defaultData, null, 2)) } finally { setIsLoading(false) } }, []) useEffect(() => { fetchData() }, [fetchData]) useEffect(() => { if (!data || !data.nodes || !data.connections) { setNodes([]) setEdges([]) return } const newNodes: Node[] = data.nodes.map((node) => ({ id: node.name, position: { x: node.x * 100, y: -node.y * 100 }, data: { label: node.name }, style: { background: node.isHome ? "#10b981" : node.isTag ? node.tagColor || "#f59e0b" : "#3f3f46", color: "#ffffff", border: "2px solid #27272a", borderRadius: "50%", width: 60, height: 60, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", fontSize: "14px", fontWeight: "bold", }, sourcePosition: Position.Top, targetPosition: Position.Top, })) const newEdges: Edge[] = data.connections.map((connection) => ({ id: `e${connection.fromNode}-${connection.toNode}`, source: connection.fromNode, target: connection.toNode, type: "straight", style: { stroke: "#10b981", strokeWidth: 2, }, label: connection.distance.toString(), labelStyle: { fill: "#ffffff", fontSize: 12, fontWeight: "bold", }, labelBgStyle: { fill: "#18181b", opacity: 0.8, }, labelBgPadding: [4, 4], labelBgBorderRadius: 4, })) setNodes(newNodes) setEdges(newEdges) }, [data, setNodes, setEdges]) const handleEditorChange = (value: string | undefined) => { if (value) { setEditorValue(value) try { const parsedData = JSON.parse(value) setData(parsedData) } catch (error) { console.error("Invalid JSON:", error) } } } const handleUpdate = async () => { try { setIsSaving(true) setError(null) const response = await fetch("/api/warehouse/bulk", { method: "POST", headers: { "Content-Type": "application/json", }, body: editorValue, }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to update data") } await fetchData() } catch (error) { console.error("Error updating data:", error) setError(error instanceof Error ? error.message : "Failed to update data") } finally { setIsSaving(false) } } const handleDelete = async () => { if (!confirm("Are you sure you want to delete all warehouse configuration data? This action cannot be undone.")) { return } try { setIsLoading(true) const response = await fetch("/api/warehouse/bulk/clear", { method: "DELETE", }) if (response.ok) { setData(defaultData) setEditorValue(JSON.stringify(defaultData, null, 2)) await fetchData() } else { const errorData = await response.json() throw new Error(errorData.error || "Failed to delete data") } } catch (error) { console.error("Error deleting data:", error) setError(error instanceof Error ? error.message : "Failed to delete data") } finally { setIsLoading(false) } } return (

Warehouse Configuration

Define and visualize your warehouse layout

{error && (

{error}

)}

{/* Left panel - JSON Editor */} Configuration Editor

} /> {/* Right panel - Graph Visualization */} Warehouse Layout {isLoading ? (

) : ( )}

) } [V0_FILE]typescriptreact:file="app/dashboard/boxes/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { z } from "zod" import { BoxIcon, Trash2, Package, Layers, Scale, Ruler } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" // Schema for box data const boxSchema = z.object({ name: z.string().min(1).max(50), width: z.number().positive(), height: z.number().positive(), depth: z.number().positive(), weight: z.number().positive(), color: z.string().min(1).max(50), shelfId: z.number().int(), level: z.number().int().min(1), tag: z.string().min(1).max(50).optional(), }) export default function BoxesPage() { const [shelves, setShelves] = useState([]) const [boxes, setBoxes] = useState([]) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [boxForm, setBoxForm] = useState({ name: "", width: 0, height: 0, depth: 0, weight: 0, color: "#10b981", // Default color - emerald-500 shelfId: 0, level: 1, tag: "", }) // Fetch shelves and boxes data useEffect(() => { const fetchData = async () => { try { setIsLoading(true) const [shelvesResponse, boxesResponse] = await Promise.all([fetch("/api/shelves"), fetch("/api/boxes")]) if (!shelvesResponse.ok || !boxesResponse.ok) { throw new Error("Failed to fetch data") } const [shelvesData, boxesData] = await Promise.all([shelvesResponse.json(), boxesResponse.json()]) setShelves(shelvesData) setBoxes(boxesData) } catch (err) { console.error("Error fetching data:", err) setError("Failed to load data") } finally { setIsLoading(false) } } fetchData() }, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { // Validate form data const formData = { name: boxForm.name, width: boxForm.width, height: boxForm.height, depth: boxForm.depth, weight: boxForm.weight, color: boxForm.color, shelfId: boxForm.shelfId, level: boxForm.level, tag: boxForm.tag, } const response = await fetch("/api/boxes", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to create box") } const newBox = await response.json() setBoxes((prev) => [...prev, newBox]) setBoxForm({ name: "", width: 0, height: 0, depth: 0, weight: 0, color: "#10b981", shelfId: 0, level: 1, tag: "", }) alert("Box created successfully!") } catch (error) { console.error("Error creating box:", error) alert(error instanceof Error ? error.message : "Failed to create box") } } const handleDeleteBox = async (boxId: number) => { if (!confirm("Are you sure you want to delete this box?")) { return } try { const response = await fetch(`/api/boxes/${boxId}`, { method: "DELETE", }) if (!response.ok) { throw new Error("Failed to delete box") } setBoxes((prev) => prev.filter((box) => box.id !== boxId)) alert("Box deleted successfully!") } catch (error) { alert(error instanceof Error ? error.message : "Failed to delete box") } } // Get available levels for the selected shelf const selectedShelf = shelves.find((s) => s.id === boxForm.shelfId) const availableLevels = selectedShelf ? Array.from({ length: selectedShelf.levels }, (_, i) => i + 1) : [] if (isLoading) { return (

) } if (error) { return (

Error

{error}

) } return (

Boxes Management

Create and manage warehouse boxes

{/* Left Column - Create Box Form */}

Create New Box Fill in the details to create a new box

Box Name setBoxForm((prev) => ({ ...prev, name: e.target.value }))} className="bg-zinc-800 border-zinc-700 text-white" required />

Width (cm) setBoxForm((prev) => ({ ...prev, width: Number(e.target.value) }))} className="bg-zinc-800 border-zinc-700 text-white" required min="0" step="0.1" />

Height (cm) setBoxForm((prev) => ({ ...prev, height: Number(e.target.value) }))} className="bg-zinc-800 border-zinc-700 text-white" required min="0" step="0.1" />

Depth (cm) setBoxForm((prev) => ({ ...prev, depth: Number(e.target.value) }))} className="bg-zinc-800 border-zinc-700 text-white" required min="0" step="0.1" />

Weight (kg) setBoxForm((prev) => ({ ...prev, weight: Number(e.target.value) }))} className="bg-zinc-800 border-zinc-700 text-white" required min="0" step="0.1" />

Box Color

setBoxForm((prev) => ({ ...prev, color: e.target.value }))} className="h-10 w-10 rounded cursor-pointer" /> setBoxForm((prev) => ({ ...prev, color: e.target.value }))} className="flex-1 bg-zinc-800 border-zinc-700 text-white" />

Select Shelf

Select Level

Tag (Optional) setBoxForm((prev) => ({ ...prev, tag: e.target.value }))} className="bg-zinc-800 border-zinc-700 text-white" placeholder="Optional tag name" />

{/* Available Shelves */} Available Shelves Shelves where boxes can be placed

{shelves.length === 0 ? (

No shelves available. Create shelves first.

) : ( shelves.map((shelf) => (

{shelf.name} {shelf.tag && ( {shelf.tag} )}

Location:

{shelf.location?.name || "Unknown"}

Height:

{shelf.initialHeight}cm

Levels:

{shelf.levels}

)) )}

{/* Right Column - Existing Boxes */} Existing Boxes All boxes in the warehouse {boxes.length === 0 ? (

No boxes created yet. Create your first box.

) : (

{boxes.map((box) => (

{box.name}

Shelf:

{box.slot?.shelf?.name || "Unknown"}

Level:

{box.slot?.level || "Unknown"}

Dimensions:

{box.width}x{box.height}x{box.depth} cm

Weight:

{box.weight} kg

{box.tag && ( {box.tag} )}

))}

)}

) } [V0_FILE]json:file="package.json" isMerged="true" { "dependencies": { "three": "^0.160.0" } } [V0_FILE]typescriptreact:file="app/dashboard/monitoring/page.tsx" isEdit="true" isQuickEdit="true" /* eslint-disable */ "use client" import { useState, useEffect, useRef } from "react" import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { CuboidIcon as Cube, Eye, Layers, Network } from "lucide-react" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" interface WarehouseNode { id: string name: string x: number y: number isHome: boolean isTag: boolean tagColor?: string shelf?: Shelf } interface WarehouseConnection { id: string fromNode: string toNode: string distance: number nodeFrom: WarehouseNode nodeTo: WarehouseNode } interface Shelf { id: number name: string initialHeight: number ShelfSlotHeight: number levels: number locationId: string tag: string color?: string slots: ShelfSlot[] location: { id: string name: string x: number y: number isHome: boolean isTag: boolean tagColor?: string } } interface ShelfSlot { id: number shelfId: number level: number box?: Box boxId?: number } interface Box { id: number name: string width: number height: number depth: number weight: number color: string tag: string } export default function WarehouseMonitoringPage() { const containerRef = useRef(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [nodes, setNodes] = useState([]) const [connections, setConnections] = useState([]) const [shelves, setShelves] = useState([]) const [boxes, setBoxes] = useState([]) // Visibility toggles const [showNodes, setShowNodes] = useState(false) const [showConnections, setShowConnections] = useState(true) const [showShelves, setShowShelves] = useState(true) const [showBoxes, setShowBoxes] = useState(true) // Three.js objects const sceneRef = useRef(null) const cameraRef = useRef(null) const rendererRef = useRef(null) const controlsRef = useRef(null) // Object groups for easy visibility toggling const nodesGroupRef = useRef(null) const connectionsGroupRef = useRef(null) const shelvesGroupRef = useRef(null) const boxesGroupRef = useRef(null) // Fetch warehouse data useEffect(() => { const fetchData = async () => { try { setIsLoading(true) const [warehouseResponse, shelvesResponse, boxesResponse] = await Promise.all([ fetch("/api/warehouse/bulk"), fetch("/api/shelves"), fetch("/api/boxes"), ]) if (!warehouseResponse.ok || !shelvesResponse.ok || !boxesResponse.ok) { throw new Error("Failed to fetch data") } const [warehouseData, shelvesData, boxesData] = await Promise.all([ warehouseResponse.json(), shelvesResponse.json(), boxesResponse.json(), ]) // Process warehouse data if (warehouseData.nodes && warehouseData.connections) { setNodes(warehouseData.nodes) setConnections(warehouseData.connections) console.log("Nodes loaded:", warehouseData.nodes.length) } // Process shelves and boxes setShelves(shelvesData) setBoxes(boxesData) console.log("Shelves loaded:", shelvesData.length) console.log("Boxes loaded:", boxesData.length) } catch (err) { console.error("Error fetching data:", err) setError("Failed to load warehouse data") } finally { setIsLoading(false) } } fetchData() }, []) // Initialize Three.js scene useEffect(() => { if (!containerRef.current || isLoading || error) return // Setup scene const scene = new THREE.Scene() scene.background = new THREE.Color(0x18181b) // zinc-900 sceneRef.current = scene // Setup camera with top-down position const camera = new THREE.PerspectiveCamera( 60, containerRef.current.clientWidth / containerRef.current.clientHeight, 0.1, 1000, ) // Position camera high above the scene looking down camera.position.set(0, 30, 0) // Make camera look straight down at the center of the scene camera.lookAt(0, 0, 0) cameraRef.current = camera // Setup renderer const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight) renderer.shadowMap.enabled = true containerRef.current.appendChild(renderer.domElement) rendererRef.current = renderer // Setup controls with limits for top-down view const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true controls.dampingFactor = 0.05 // Restrict rotation to maintain more of a top-down perspective controls.minPolarAngle = 0 // Allow looking straight down (0 degrees) controls.maxPolarAngle = Math.PI / 3 // Restrict to about 60 degrees from vertical // Add distance limits controls.minDistance = 15 controls.maxDistance = 50 controlsRef.current = controls // Create object groups nodesGroupRef.current = new THREE.Group() connectionsGroupRef.current = new THREE.Group() shelvesGroupRef.current = new THREE.Group() boxesGroupRef.current = new THREE.Group() scene.add(nodesGroupRef.current) scene.add(connectionsGroupRef.current) scene.add(shelvesGroupRef.current) scene.add(boxesGroupRef.current) // Add ambient light const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight) // Add directional light const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8) directionalLight.position.set(10, 20, 10) directionalLight.castShadow = true scene.add(directionalLight) // Add floor const floorGeometry = new THREE.PlaneGeometry(100, 100) const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x27272a, // zinc-800 side: THREE.DoubleSide, roughness: 0.8, }) const floor = new THREE.Mesh(floorGeometry, floorMaterial) floor.rotation.x = Math.PI / 2 floor.receiveShadow = true scene.add(floor) // Add grid helper const gridHelper = new THREE.GridHelper(100, 100, 0x3f3f46, 0x3f3f46) scene.add(gridHelper) // Animation loop const animate = () => { requestAnimationFrame(animate) controls.update() renderer.render(scene, camera) } animate() // Handle resize const handleResize = () => { if (!containerRef.current) return const width = containerRef.current.clientWidth const height = containerRef.current.clientHeight if (cameraRef.current) { cameraRef.current.aspect = width / height cameraRef.current.updateProjectionMatrix() } if (rendererRef.current) { rendererRef.current.setSize(width, height) } } window.addEventListener("resize", handleResize) // Cleanup return () => { window.removeEventListener("resize", handleResize) if (containerRef.current && rendererRef.current) { containerRef.current.removeChild(rendererRef.current.domElement) } // Dispose of geometries and materials scene.traverse((object) => { if (object instanceof THREE.Mesh) { object.geometry.dispose() if (object.material instanceof THREE.Material) { object.material.dispose() } else if (Array.isArray(object.material)) { object.material.forEach((material) => material.dispose()) } } }) } }, [isLoading, error]) // Render warehouse nodes useEffect(() => { if (!nodesGroupRef.current || !nodes.length) return // Clear previous nodes while (nodesGroupRef.current.children.length > 0) { const object = nodesGroupRef.current.children[0] nodesGroupRef.current.remove(object) } // Create nodes nodes.forEach((node) => { // Node sphere const geometry = new THREE.SphereGeometry(0.3, 32, 32) const material = new THREE.MeshStandardMaterial({ color: node.isHome ? 0x10b981 : node.isTag ? node.tagColor ? new THREE.Color(node.tagColor).getHex() : 0xf59e0b : 0x3b82f6, roughness: 0.7, metalness: 0.3, }) const sphere = new THREE.Mesh(geometry, material) sphere.position.set(node.x, 0.3, -node.y) sphere.castShadow = true sphere.userData = { type: "node", id: node.id, name: node.name } // Node label - make it smaller const canvas = document.createElement("canvas") const context = canvas.getContext("2d") if (context) { canvas.width = 96 // Reduced from 128 canvas.height = 48 // Reduced from 64 context.fillStyle = "#18181b" context.fillRect(0, 0, canvas.width, canvas.height) context.font = "bold 18px Arial" // Reduced from 24px context.fillStyle = "#ffffff" context.textAlign = "center" context.textBaseline = "middle" context.fillText(node.name, canvas.width / 2, canvas.height / 2) const texture = new THREE.CanvasTexture(canvas) const labelMaterial = new THREE.SpriteMaterial({ map: texture }) const label = new THREE.Sprite(labelMaterial) label.position.set(0, 0.6, 0) // Reduced from 0.8 label.scale.set(1.5, 0.75, 1) // Reduced from 2, 1, 1 sphere.add(label) } if (nodesGroupRef.current) { nodesGroupRef.current.add(sphere) nodesGroupRef.current.visible = showNodes } }) }, [nodes, showNodes]) // Render connections useEffect(() => { if (!connectionsGroupRef.current || !connections.length || !nodes.length) return // Clear previous connections while (connectionsGroupRef.current.children.length > 0) { const object = connectionsGroupRef.current.children[0] connectionsGroupRef.current.remove(object) } // Create node map for quick lookup const nodeMap = new Map(nodes.map((node) => [node.name, node])) // Create connections connections.forEach((connection) => { const fromNode = nodeMap.get(connection.fromNode) const toNode = nodeMap.get(connection.toNode) if (fromNode && toNode) { const points = [new THREE.Vector3(fromNode.x, 0.1, -fromNode.y), new THREE.Vector3(toNode.x, 0.1, -toNode.y)] const geometry = new THREE.BufferGeometry().setFromPoints(points) const material = new THREE.LineBasicMaterial({ color: 0x10b981, linewidth: 1, // Reduced from 2 }) const line = new THREE.Line(geometry, material) line.userData = { type: "connection", id: connection.id, fromNode: connection.fromNode, toNode: connection.toNode, distance: connection.distance, } // Add distance label at midpoint const midpoint = new THREE.Vector3((fromNode.x + toNode.x) / 2, 0.3, -(fromNode.y + toNode.y) / 2) const canvas = document.createElement("canvas") const context = canvas.getContext("2d") if (context) { canvas.width = 64 canvas.height = 32 context.fillStyle = "#18181b" context.fillRect(0, 0, canvas.width, canvas.height) context.font = "16px Arial" context.fillStyle = "#ffffff" context.textAlign = "center" context.textBaseline = "middle" context.fillText(connection.distance.toString(), canvas.width / 2, canvas.height / 2) const texture = new THREE.CanvasTexture(canvas) const labelMaterial = new THREE.SpriteMaterial({ map: texture }) const label = new THREE.Sprite(labelMaterial) label.position.copy(midpoint) label.scale.set(1, 0.5, 1) if (connectionsGroupRef.current) { connectionsGroupRef.current.add(label) connectionsGroupRef.current.add(line) connectionsGroupRef.current.visible = showConnections } } } }) }, [connections, nodes, showConnections]) // Render shelves useEffect(() => { if (!shelvesGroupRef.current || !shelves.length || !nodes.length) return // Clear previous shelves while (shelvesGroupRef.current.children.length > 0) { const object = shelvesGroupRef.current.children[0] shelvesGroupRef.current.remove(object) } // Create shelves shelves.forEach((shelf) => { // Use shelf.location directly instead of looking up in nodeMap const node = shelf.location if (!node) return // Base shelf dimensions const width = 1.5 const depth = 0.75 const levelHeight = (shelf.ShelfSlotHeight / 100) * 5 // Create shelf group const shelfGroup = new THREE.Group() shelfGroup.userData = { type: "shelf", id: shelf.id, name: shelf.name } // Determine if this shelf should be vertical based on y-coordinate // Shelves at y=0 or y=-12 will be horizontal, all others will be vertical const isVertical = node.y !== 0 && node.y !== -12 // Create shelf levels for (let level = 1; level <= shelf.levels; level++) { // For vertical shelves, swap width and depth const levelGeometry = isVertical ? new THREE.BoxGeometry(depth, 0.15, width) : new THREE.BoxGeometry(width, 0.15, depth) const levelMaterial = new THREE.MeshStandardMaterial({ color: 0x52525b, roughness: 0.7, metalness: 0.3, }) const levelShelf = new THREE.Mesh(levelGeometry, levelMaterial) const levelY = level * levelHeight levelShelf.position.set(0, levelY, 0) levelShelf.castShadow = true levelShelf.receiveShadow = true shelfGroup.add(levelShelf) } // Add vertical supports from floor to roof const supportGeometry = new THREE.CylinderGeometry(0.05, 0.05, (shelf.levels + 1) * levelHeight, 8) const supportMaterial = new THREE.MeshStandardMaterial({ color: 0x52525b, roughness: 0.7, metalness: 0.3, }) // Four supports at corners - adjust positions based on orientation const positions = isVertical ? [ [depth / 2 - 0.1, -width / 2 + 0.1], [depth / 2 - 0.1, width / 2 - 0.1], [-depth / 2 + 0.1, width / 2 - 0.1], [-depth / 2 + 0.1, -width / 2 + 0.1], ] : [ [width / 2 - 0.1, -depth / 2 + 0.1], [width / 2 - 0.1, depth / 2 - 0.1], [-width / 2 + 0.1, depth / 2 - 0.1], [-width / 2 + 0.1, -depth / 2 + 0.1], ] positions.forEach(([x, z]) => { const support = new THREE.Mesh(supportGeometry, supportMaterial) support.position.set(x, ((shelf.levels + 1) * levelHeight) / 2, z) shelfGroup.add(support) }) // Add roof const roofGeometry = isVertical ? new THREE.BoxGeometry(depth, 0.15, width) : new THREE.BoxGeometry(width, 0.15, depth) const roofMaterial = new THREE.MeshStandardMaterial({ color: shelf.color ? new THREE.Color(shelf.color).getHex() : 0x71717a, roughness: 0.7, metalness: 0.3, }) const roof = new THREE.Mesh(roofGeometry, roofMaterial) const roofY = (shelf.levels + 1) * levelHeight roof.position.set(0, roofY, 0) roof.castShadow = true roof.receiveShadow = true shelfGroup.add(roof) // Calculate offset based on y-coordinate const offsetDistance = 1.0 // Increased offset distance let offsetX = 0 let offsetZ = 0 if (node.y === 0) { // For shelves at y=0, push upward (negative Z in Three.js) offsetZ = -offsetDistance } else if (node.y === -12) { // For shelves at y=-12, push downward (positive Z in Three.js) offsetZ = offsetDistance } else { // For other shelves (vertical ones), offset in x direction offsetX = offsetDistance } // Position the entire shelf group with offset shelfGroup.position.set(node.x + offsetX, 0, -node.y + offsetZ) // Add shelf label const canvas = document.createElement("canvas") const context = canvas.getContext("2d") if (context) { canvas.width = 256 canvas.height = 64 context.fillStyle = "#18181b" context.fillRect(0, 0, canvas.width, canvas.height) context.font = "bold 24px Arial" context.fillStyle = "#ffffff" context.textAlign = "center" context.textBaseline = "middle" context.fillText(shelf.name, canvas.width / 2, canvas.height / 2) const texture = new THREE.CanvasTexture(canvas) const labelMaterial = new THREE.SpriteMaterial({ map: texture }) const label = new THREE.Sprite(labelMaterial) label.position.set(0, (shelf.levels + 1) * levelHeight + 0.5, 0) label.scale.set(3, 0.75, 1) shelfGroup.add(label) } if (shelvesGroupRef.current) { shelvesGroupRef.current.add(shelfGroup) shelvesGroupRef.current.visible = showShelves } }) }, [shelves, showShelves]) // Render boxes useEffect(() => { if (!boxesGroupRef.current || !boxes.length || !shelves.length || !nodes.length) return // Clear previous boxes while (boxesGroupRef.current.children.length > 0) { const object = boxesGroupRef.current.children[0] boxesGroupRef.current.remove(object) } // Create maps for quick lookups const nodeMap = new Map(nodes.map((node) => [node.id, node])) const shelfMap = new Map(shelves.map((shelf) => [shelf.id, shelf])) // Create a map of shelf slots const slotMap = new Map() shelves.forEach((shelf) => { if (shelf.slots) { shelf.slots.forEach((slot) => { if (slot.boxId) { slotMap.set(slot.boxId, { shelfId: shelf.id, level: slot.level }) } }) } }) // Create boxes boxes.forEach((box) => { // Find the slot and shelf for this box const slotInfo = slotMap.get(box.id) if (!slotInfo) return const shelf = shelfMap.get(slotInfo.shelfId) if (!shelf) return const node = nodeMap.get(shelf.locationId) if (!node) return // Determine if this shelf is vertical based on y-coordinate const isVertical = node.y !== 0 && node.y !== -12 // Convert dimensions from cm to meters const width = box.width / 100 const height = box.height / 100 const depth = box.depth / 100 // Calculate position based on shelf and level const baseHeight = 0.3 const levelHeight = (shelf.ShelfSlotHeight / 100) * 5 const boxY = baseHeight + slotInfo.level * levelHeight - levelHeight / 2 // Calculate offset based on y-coordinate (same as shelf offset) const offsetDistance = 1.0 // Increased offset distance let offsetX = 0 let offsetZ = 0 if (node.y === 0) { // For shelves at y=0, push upward (negative Z in Three.js) offsetZ = -offsetDistance } else if (node.y === -12) { // For shelves at y=-12, push downward (positive Z in Three.js) offsetZ = offsetDistance } else { // For other shelves (vertical ones), offset in x direction offsetX = offsetDistance } // Create box mesh with dimensions adjusted for orientation const geometry = isVertical ? new THREE.BoxGeometry(depth, height, width) : new THREE.BoxGeometry(width, height, depth) const material = new THREE.MeshStandardMaterial({ color: new THREE.Color(box.color).getHex(), roughness: 0.4, metalness: 0.6, }) const boxMesh = new THREE.Mesh(geometry, material) // Position the box at the node location with offset boxMesh.position.set(node.x + offsetX, boxY, -node.y + offsetZ) boxMesh.castShadow = true boxMesh.receiveShadow = true boxMesh.userData = { type: "box", id: box.id, name: box.name } // Add box label const canvas = document.createElement("canvas") const context = canvas.getContext("2d") if (context) { canvas.width = 128 canvas.height = 64 context.fillStyle = "#18181b" context.fillRect(0, 0, canvas.width, canvas.height) context.font = "bold 16px Arial" context.fillStyle = "#ffffff" context.textAlign = "center" context.textBaseline = "middle" context.fillText(box.name, canvas.width / 2, canvas.height / 2) const texture = new THREE.CanvasTexture(canvas) const labelMaterial = new THREE.SpriteMaterial({ map: texture }) const label = new THREE.Sprite(labelMaterial) label.position.set(0, height / 2 + 0.2, 0) label.scale.set(1.5, 0.75, 1) boxMesh.add(label) } if (boxesGroupRef.current) { boxesGroupRef.current.add(boxMesh) boxesGroupRef.current.visible = showBoxes } }) }, [boxes, shelves, nodes, showBoxes]) // Update visibility when toggles change useEffect(() => { if (nodesGroupRef.current) nodesGroupRef.current.visible = showNodes if (connectionsGroupRef.current) connectionsGroupRef.current.visible = showConnections if (shelvesGroupRef.current) shelvesGroupRef.current.visible = showShelves if (boxesGroupRef.current) boxesGroupRef.current.visible = showBoxes }, [showNodes, showConnections, showShelves, showBoxes]) if (isLoading) { return (

) } if (error) { return (

Error

{error}

) } return (

Warehouse Monitoring

3D visualization of warehouse layout and inventory

{/* Controls Panel */} Visibility Controls Toggle elements visibility

Nodes

Connections

Shelves

Boxes

Statistics

Nodes

{nodes.length}

Connections

{connections.length}

Shelves

{shelves.length}

Boxes

{boxes.length}

{/* 3D Visualization */} Warehouse 3D View

) }

About

Tags

Share

More from kadacheahmedrami

More Templates Like This

About

Tags

Share

About

Tags

Share

More from kadacheahmedrami

More Templates Like This